<template>
	<div class="car_search">
		<div class="wrap">
			<div class="left">
				<div ref='pic_type' class="pic_type">
						{{type_content}}
						<i class="iconfont icon-sanjiaoxing"></i>
					
					
					
					<div v-show = "nav_switch" class="sec_nav">
						<ul class="third_nav">
							<li class="types">图片类型</li>
							<li class="types">摄影图片</li>
							<li class="types">矢量图库</li>
							<li class="types">热门精选</li>
							<li class="types">高端PLUS</li>
						</ul>
					</div>
				</div>
				<div class="keyword_search">
					<input v-model="input_val" type="text" ref='input'>
				</div>
			</div>
			<div class="right">
				<div class="cam">
					<i class="iconfont icon-xiangji"></i>
				</div>
				<div class="but" ref='search' @click="search">
					<div class="iconwrap"><i class="iconfont icon-search"></i></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {get_photo} from '../../API/search.js';
	
	export default {
		data(){
			return {
				nav_switch: false,
				kind:0,
				type_content:"图片类型",
				input_val: ''
			}
		},

		methods:{
			search(){
				this.$router.push({
					name: 'Search',
					query:{
						label: this.input_val
					}
				})
				
				// this.$bus.$emit('tran_input_val', this.input_val)
				this.$root.$children[0].$children[0].activeName = 'Search'
				// console.log(this.$root,111111)
				// 请求搜索结果
				get_photo({
					kind: this.kind,
					label:this.$refs.input.value
				}).then(res=>{
					this.$store.commit('change_gallery_arr',res.data.data.photo_list);
				})
				
				// document.querySelector('.el-tabs__active-bar').classList.remove('dpblock');
				// document.querySelector('.el-tabs__active-bar').classList.add('dpnone');
				
				document.querySelectorAll('.el-tabs__item').forEach( (el)=>{
					// el.classList.remove('el-tabs__item.is-active');
					el.classList.add('cancel_hover');
				})
			}
		},
		mounted() {
			// 给input绑定input.更新input框的数据到data里面
			
			this.$refs.pic_type.addEventListener('mouseover', ()=>{
				this.nav_switch = true;
			})
			this.$refs.pic_type.addEventListener('mouseleave', ()=>{
				this.nav_switch = false;
			})

			
			document.querySelector('.sec_nav').addEventListener('click',(e)=>{
				console.log(e.target.innerText)
				if(e.target.innerText == "图片类型"){
					this.kind = 0,
					this.type_content = "图片类型"
				}else if(e.target.innerText == "摄影图片"){
					this.kind = 1,
					this.type_content = "摄影图片"
				}else if(e.target.innerText == "矢量图库"){
					this.kind = 2,
					this.type_content = "矢量图库"
				}else if(e.target.innerText == "热门精选"){
					this.kind = 3,
					this.type_content = "热门精选"
				}else if(e.target.innerText == "高端PLUS"){
					this.kind = 4,
					this.type_content = "高端PLUS"
				}
			})
			// this.$parent.()
			this.$refs.search.addEventListener('click', ()=>{
				// this.$router.push({
				// 	name: 'Search',
				// 	query:{
				// 		label: this.input_val
				// 	}
				// })
				
				// this.$bus.$emit('tran_input_val', this.input_val)
				// this.$root.$children[0].$children[0].activeName = 'Search'
				// // console.log(this.$root,111111)
				// // 请求搜索结果
				// get_photo({
				// 	kind: this.kind,
				// 	label:this.$refs.input.value
				// }).then(res=>{
				// 	this.$store.commit('change_gallery_arr',res.data.data.photo_list);
				// })
				// this.$router.push({
				// 	name:'Search'
				// })
				// // document.querySelector('.el-tabs__active-bar').classList.remove('dpblock');
				// // document.querySelector('.el-tabs__active-bar').classList.add('dpnone');
				
				// document.querySelectorAll('.el-tabs__item').forEach( (el)=>{
				// 	// el.classList.remove('el-tabs__item.is-active');
				// 	el.classList.add('cancel_hover');
				// })
				// .classList.remove('active');
				// document.querySelectorAll('.el-tabs__item').classList.add('cancel_hover');
			})
			document.querySelector('.el-tabs__nav').addEventListener('click', ()=>{

				
				// document.querySelector('.el-tabs__active-bar').classList.remove('dpnone');
				// document.querySelector('.el-tabs__active-bar').classList.add('dpblock');
				
				document.querySelectorAll('.el-tabs__item').forEach((el)=>{
					el.classList.remove('cancel_hover');
					// el.classList.add('el-tabs__item.is-active');
				})
			}) 
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		background-color: hsla(0,0%,100%,.9);
		width: 800px;
		height: 70px;
		display: flex;
		justify-content: space-between;
		.left{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.pic_type{
				// hsla(0,0%,100%,.9)
				background-color: hsla(0,0%,100%,.9);
				width: 140px;
				height: 70px;
				line-height: 70px;
				.sec_nav{
					background-color: hsla(0,0%,100%,.9);
						// height: 35px;
						// font-size: 14px;
					li{
						height: 30px;
						font-size: 12px;
						line-height: 30px;
					}
					li:hover{
						background-color: #49c5b6;
						color: white;
						user-select: none;
					}
				}
			}

			.keyword_search{
				height: 70px;
				line-height: 70px;
				input{
					border: 0px;
					width: 415px;
					height: 70px;
					line-height: 70px;
					padding: 0 10px;
					margin-left: 10px;
				}
			}
		}
		.right{
			display: flex;
			justify-content: flex-start;
			.cam{
				
				line-height: 70px;
				.icon-xiangji{
					font-size: 43px;
					height: 70px;
					line-height: 70px;
				}
			}
			.but{
				height: 70px;
				line-height: 70px;
				width: 180px;
				.iconwrap{
					height: 70px;
					.icon-search{
						font-size: 50px;
					}
				}
				
			}
		}
	}
	::v-deep .el-tabs__item.is-active{
		color: red !important;
	}
</style>
